<template>
  <template v-if="getShow">
    <div class="flex flex-col items-center">
      <LoginFormTitle class="enter-x" />
      <Form
        class="p-4 enter-x"
        :model="formData"
        :rules="rules"
        ref="formRef"
        layout="vertical"
        :requiredMark="false"
      >
        <!-- <FormItem name="account" class="enter-x">
        <Input
          size="large"
          v-model:value="formData.account"
          :placeholder="t('sys.login.userName')"
        />
      </FormItem>

      <FormItem name="mobile" class="enter-x">
        <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" />
      </FormItem>
      <FormItem name="sms" class="enter-x">
        <CountdownInput
          size="large"
          v-model:value="formData.sms"
          :placeholder="t('sys.login.smsCode')"
        />
      </FormItem> -->
        <FormItem name="email" class="enter-x" label="电子邮箱">
          <Input size="large" v-model:value="formData.email">
            <template #addonBefore>
              <Icon icon="oui:email" />
            </template>
          </Input>
        </FormItem>
        <FormItem class="enter-x">
          <Button type="primary" size="large" block @click="handleReset" :loading="loading">
            {{ t('common.resetText') }}
          </Button>
          <Button size="large" block class="mt-4" @click="handleBackLogin">
            {{ t('sys.login.backSignIn') }}
          </Button>
        </FormItem>
      </Form>
    </div>
  </template>
</template>
<script lang="ts" setup>
  import { reactive, ref, computed, unref } from 'vue';
  import LoginFormTitle from './LoginFormTitle.vue';
  import { Form, Input, Button } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { CountdownInput } from '/@/components/CountDown';
  import Icon from '/@/components/Icon';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useLoginState, LoginStateEnum } from './useLogin';
  import type { Rule } from 'ant-design-vue/es/form';
  import { resetPasswordByEmail } from '/@/api/cms/link';
  const FormItem = Form.Item;
  const { t } = useI18n();
  const { handleBackLogin, getLoginState } = useLoginState();
  // const { getFormRules } = useFormRules();//useLogin

  const formRef = ref();
  const loading = ref(false);
  const rules: Record<string, Rule[]> = reactive({
    email: [
      {
        required: true,
        message: '请输入邮箱',
        trigger: 'blur',
      },
      {
        type: 'email',
        message: '请输入正确的邮箱',
        trigger: 'blur',
      },
    ],
  });
  const formData = reactive({
    // account: '',
    // mobile: '',
    // sms: '',
    email: '',
  });
  const { createMessage } = useMessage();
  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD);

  async function handleReset() {
    const form = unref(formRef);
    if (!form) return;
    const email = await form.validate();
    try {
      await resetPasswordByEmail(email);
      createMessage.success('密码重置链接已成功发送！');
    } catch (e) {
      createMessage.error('密码重置链接发送失败！');
    }

    // handleBackLogin();
  }
</script>
